/*
  学习目标：websock的基本使用
  1. 下包 socket.io-client

  

*/

import { getAuth } from '@/utils/storage';
import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';
import styles from './index.module.scss';
import history from '@/utils/history';
export default function Test() {
  useEffect(() => {
    // 2. 创建客户端实例
    const client = io('http://geek.itheima.net/', {
      query: {
        token: getAuth().token,
      },
      transports: ['websocket'],
    });

    // 3. 监听连接成功
    client.on('connect', () => {
      console.log('val  ----->  ', '连接成功');
    });

    // 4. 发送消息
    client.emit('message', { msg: '上下五千年', timestamp: Date.now() });
    // 5. 监听消息
    client.on('message', (data) => {
      console.log('data  ----->  ', data);
    });

    return () => {
      console.log('我要卸载了  ----->  ');
      client.close();
    };
    // 6. 主动关闭连接
  }, []);
  return (
    <div className={styles.root}>
      <button onClick={() => history.push('/login')}>点我卸载</button>
    </div>
  );
}
